<template>
  <div :class="['xz-person-record', type]" v-if="visible" @click="onClick">
    <div class="left">
      <img class="img" src="../../assets/images/icon-record.png" />
    </div>
    <div class="line"></div>
    <div class="center">
      <div class="label">{{type === 'normal' ? '过往记录' : type === 'warning' ? '犯罪记录' : '记录'}}</div>
      <div class="label"><span>{{value}}</span>条</div>
    </div>
    <div class="right">
      <img class="img" src="../../assets/images/icon-arrow.png" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'XzPersonRecord',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: '',
      required: true
    },
    value: {
      type: Number,
      default: 0,
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {
    onClick () {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
  .xz-person-record {
    position: fixed;
    right: -9px;
    top: 280px;
    width: 210px;
    height: 80px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 999;
    &.normal {
      background: url("../../assets/images/bg-normal.png") no-repeat;
      background-size: 100% 100%;
      background-position-y: 2px;
    }
    &.warning {
      background: url("../../assets/images/bg-warning.png") no-repeat;
      background-size: 100% 100%;
      background-position-y: 2px;
    }
    .left {
      width: 32px;
      height: 34px;
      padding-left: 27px;
    }
    .line {
      margin: 0 19px 0 6px;
      width: 1px;
      height: 30px;
      background: #fff;
      opacity: 0.3;
    }
    .right {
      width: 9px;
      height: 16px;
      padding-right: 27px;
    }
    .img {
      width: 100%;
      height: 100%;
    }
    .center {
      flex: 1;
      .label {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        span {
          font-size: 32px;
          font-weight: bold;
        }
      }
    }
  }
</style>
